<!DOCTYPE html>
<html>
  <head>
    <title>onthegosystems-icons glyphs preview</title>

    <style>
      /* Page Styles */

      * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background: #fff;
        color: #444;
        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      a,
      a:visited {
        color: #888;
        text-decoration: underline;
      }
      a:hover,
      a:focus { color: #000; }

      header {
        border-bottom: 2px solid #ddd;
        margin-bottom: 20px;
        overflow: hidden;
        padding: 20px 0;
      }

      header h1 {
        color: #888;
        float: left;
        font-size: 36px;
        font-weight: 300;
      }

      header a {
        float: right;
        font-size: 14px;
      }

      .container {
        margin: 0 auto;
        max-width: 1200px;
        min-width: 960px;
        padding: 0 40px;
        width: 90%;
      }

      .glyph {
        border-bottom: 1px dotted #ccc;
        padding: 10px 0 20px;
        margin-bottom: 20px;
      }

      .preview-glyphs { vertical-align: bottom; }

      .preview-scale {
        color: #888;
        font-size: 12px;
        margin-top: 5px;
      }

      .step {
        display: inline-block;
        line-height: 1;
        position: relative;
        width: 10%;
      }

      .step .letters,
      .step i {
        -webkit-transition: opacity .3s;
        -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
        -o-transition: opacity .3s;
        transition: opacity .3s;
      }

      .step:hover .letters { opacity: 1; }
      .step:hover i { opacity: .3; }

      .letters {
        opacity: .3;
        position: absolute;
      }

      .characters-off .letters { display: none; }
      .characters-off .step:hover i { opacity: 1; }

      
      .size-12 { font-size: 12px; }
      
      .size-14 { font-size: 14px; }
      
      .size-16 { font-size: 16px; }
      
      .size-18 { font-size: 18px; }
      
      .size-21 { font-size: 21px; }
      
      .size-24 { font-size: 24px; }
      
      .size-36 { font-size: 36px; }
      
      .size-48 { font-size: 48px; }
      
      .size-60 { font-size: 60px; }
      
      .size-72 { font-size: 72px; }
      

      .usage { margin-top: 10px; }

      .usage input {
        font-family: monospace;
        margin-right: 3px;
        padding: 2px 5px;
        text-align: center;
      }

      .usage .point { width: 150px; }

      .usage .class { width: 250px; }

      footer {
        color: #888;
        font-size: 12px;
        padding: 20px 0;
      }

      /* Icon Font: onthegosystems-icons */

      @font-face {
  font-family: "onthegosystems-icons";
  src: url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.eot");
  src: url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.eot?#iefix") format("embedded-opentype"),
       url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.woff") format("woff"),
       url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.ttf") format("truetype"),
       url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.svg#onthegosystems-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "onthegosystems-icons";
    src: url("./onthegosystems-icons_c2bf5434fb5ba6db313a98fb4e1bf347.svg#onthegosystems-icons") format("svg");
  }
}

      [data-icon]:before { content: attr(data-icon); }

      [data-icon]:before,
      .icon-access:before,
.icon-access-logo:before,
.icon-bootstrap:before,
.icon-bootstrap-logo:before,
.icon-bootstrap-original-logo:before,
.icon-bootstrap-pagination:before,
.icon-breadcrumbs:before,
.icon-btn-dropdowns:before,
.icon-buttons:before,
.icon-conditional-alert:before,
.icon-conditional-if:before,
.icon-cred:before,
.icon-cred-logo:before,
.icon-input-groups:before,
.icon-labels:before,
.icon-layouts:before,
.icon-layouts-genesis:before,
.icon-layouts-genesis-logo:before,
.icon-layouts-logo:before,
.icon-list-group:before,
.icon-module:before,
.icon-module-logo:before,
.icon-navbar:before,
.icon-packager:before,
.icon-packager-logo:before,
.icon-panels:before,
.icon-toolset:before,
.icon-toolset-export:before,
.icon-toolset-genesis-logo:before,
.icon-toolset-logo:before,
.icon-toolset-map:before,
.icon-toolset-map-logo:before,
.icon-types:before,
.icon-types-logo:before,
.icon-views:before,
.icon-views-logo:before,
.icon-wells:before,
.icon-wpml-logo:before {
        display: inline-block;
  font-family: "onthegosystems-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
      }

      .icon-access:before { content: "\f110"; }
.icon-access-logo:before { content: "\f111"; }
.icon-bootstrap:before { content: "\f112"; }
.icon-bootstrap-logo:before { content: "\f113"; }
.icon-bootstrap-original-logo:before { content: "\f136"; }
.icon-bootstrap-pagination:before { content: "\f135"; }
.icon-breadcrumbs:before { content: "\f12b"; }
.icon-btn-dropdowns:before { content: "\f12c"; }
.icon-buttons:before { content: "\f12d"; }
.icon-conditional-alert:before { content: "\f122"; }
.icon-conditional-if:before { content: "\f123"; }
.icon-cred:before { content: "\f114"; }
.icon-cred-logo:before { content: "\f115"; }
.icon-input-groups:before { content: "\f12e"; }
.icon-labels:before { content: "\f12f"; }
.icon-layouts:before { content: "\f116"; }
.icon-layouts-genesis:before { content: "\f129"; }
.icon-layouts-genesis-logo:before { content: "\f127"; }
.icon-layouts-logo:before { content: "\f117"; }
.icon-list-group:before { content: "\f130"; }
.icon-module:before { content: "\f118"; }
.icon-module-logo:before { content: "\f119"; }
.icon-navbar:before { content: "\f131"; }
.icon-packager:before { content: "\f120"; }
.icon-packager-logo:before { content: "\f121"; }
.icon-panels:before { content: "\f133"; }
.icon-toolset:before { content: "\f12a"; }
.icon-toolset-export:before { content: "\f137"; }
.icon-toolset-genesis-logo:before { content: "\f128"; }
.icon-toolset-logo:before { content: "\f11a"; }
.icon-toolset-map:before { content: "\f125"; }
.icon-toolset-map-logo:before { content: "\f124"; }
.icon-types:before { content: "\f11b"; }
.icon-types-logo:before { content: "\f11c"; }
.icon-views:before { content: "\f11d"; }
.icon-views-logo:before { content: "\f11e"; }
.icon-wells:before { content: "\f134"; }
.icon-wpml-logo:before { content: "\f11f"; }
    </style>

    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    <script>
      function toggleCharacters() {
        var body = document.getElementsByTagName('body')[0];
        body.className = body.className === 'characters-off' ? '' : 'characters-off';
      }
    </script>
  </head>

  <body class="characters-off">
    <div id="page" class="container">
      <header>
        <h1>onthegosystems-icons contains 38 glyphs:</h1>
        <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
      </header>

      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-access" class="icon-access"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-access" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-access-logo" class="icon-access-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-access-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bootstrap" class="icon-bootstrap"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bootstrap" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bootstrap-logo" class="icon-bootstrap-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bootstrap-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bootstrap-original-logo" class="icon-bootstrap-original-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bootstrap-original-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bootstrap-pagination" class="icon-bootstrap-pagination"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bootstrap-pagination" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-breadcrumbs" class="icon-breadcrumbs"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-breadcrumbs" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-btn-dropdowns" class="icon-btn-dropdowns"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-btn-dropdowns" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-buttons" class="icon-buttons"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-buttons" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-conditional-alert" class="icon-conditional-alert"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-conditional-alert" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-conditional-if" class="icon-conditional-if"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-conditional-if" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cred" class="icon-cred"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cred" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cred-logo" class="icon-cred-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cred-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-input-groups" class="icon-input-groups"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-input-groups" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-labels" class="icon-labels"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-labels" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-layouts" class="icon-layouts"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-layouts" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-layouts-genesis" class="icon-layouts-genesis"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-layouts-genesis" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-layouts-genesis-logo" class="icon-layouts-genesis-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-layouts-genesis-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-layouts-logo" class="icon-layouts-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-layouts-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-group" class="icon-list-group"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-group" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-module" class="icon-module"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-module" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-module-logo" class="icon-module-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-module-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-navbar" class="icon-navbar"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-navbar" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-packager" class="icon-packager"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-packager" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-packager-logo" class="icon-packager-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-packager-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-panels" class="icon-panels"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-panels" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset" class="icon-toolset"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset-export" class="icon-toolset-export"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset-export" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset-genesis-logo" class="icon-toolset-genesis-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset-genesis-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset-logo" class="icon-toolset-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset-map" class="icon-toolset-map"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset-map" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-toolset-map-logo" class="icon-toolset-map-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-toolset-map-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-types" class="icon-types"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-types" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-types-logo" class="icon-types-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-types-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-views" class="icon-views"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-views" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-views-logo" class="icon-views-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-views-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-wells" class="icon-wells"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-wells" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-wpml-logo" class="icon-wpml-logo"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-wpml-logo" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
        </div>
      </div>
      

      <footer>
        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
      </footer>
    </div>
  </body>
</html>
